/**
 * 组件名称：平台开发特点
 * 使用场景：首页平台开发特点介绍时使用
 * 功能介绍：3个卡片，支持响应式布局
 * 功能进度：100%
 * 待办事项：无
 */

import classes from "./IpdFeaturesDev.module.css";

import {Badge, Group, Title, Text, Card, SimpleGrid, Container, rem} from "@mantine/core";
import {IconBrowserCheck, IconServer2, IconDatabase} from "@tabler/icons-react";

const devTools = [
  {
    title: "前端框架",
    icon: IconBrowserCheck,
    description: "采用React18 + Nextjs14 + Mantine7，构建现代化的，响应式的界面",
  },
  {
    title: "后端框架",
    icon: IconServer2,
    description: "采用稳定的Spring框架搭建后台业务系统，支持各种复杂业务流程",
  },
  {
    title: "数据库",
    icon: IconDatabase,
    description: "采用Neo4j + Redis + MySQL，使用合适的数据库存储不同类型的数据",
  },
];

interface FeatureDevProps {
  title: React.ReactNode;
  icon: React.FC<any>;
  description: React.ReactNode;
}
const FeatureDev = ({icon: Icon, title, description}: FeatureDevProps) => {
  return (
    <Card shadow="md" radius="md" padding="xl" className={classes.card}>
      <Icon style={{width: rem(50), height: rem(50)}} stroke={1.5} className={classes.icon} />
      <Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
        {title}
      </Text>
      <Text fz="sm" c="dimmed" mt="sm">
        {description}
      </Text>
    </Card>
  );
};

export const IpdFeaturesDev = () => {
  return (
    <Container size="lg" pt={100}>
      <Group justify="center">
        <Badge variant="filled" size="lg">
          要做就做颠覆者
        </Badge>
      </Group>

      <Title ta="center" mt="sm">
        博采众家之长，精心挑选的技术栈
      </Title>

      <Text c="dimmed" className={classes.description} ta="center" mt="md">
        Web技术发展到现在，已经十分成熟。抱残守缺用老技术的人，终究会被时代抛弃。本系统在前端、后端、数据库均使用当前流行且最新的稳定版本，做新技术的坚定的拥护者，享受新特性带来的开发便利。
      </Text>

      <SimpleGrid cols={{base: 1, md: 3}} spacing="xl" mt={50}>
        {devTools.map((devTool, index) => (
          <FeatureDev {...devTool} key={index} />
        ))}
      </SimpleGrid>
    </Container>
  );
};
